<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>邮件</title>
<style type="text/css">
.PageHead {
	text-align: center;
	font-size: x-large;
	color: #8C1F21;
	background-color: #11B0BE;
	background-size: cover;
	background-repeat: no-repeat;
	background-origin: padding-box;
	background-attachment: fixed;
}
.PageHead select {
	width: 300px;
}
.PageHead #form1 #Diamond {
	height: 25px;
}
#form1 p #ItemCnt {
	height: 25px;
}
.PageHead #form1 #Energy {
	height: 25px;
}
.PageHead #form1 #textfield {
	height: 25px;
}
#form1 p #Load {
}
#form1 p #LinkURL {
	height: 25px;
}
#form1 p #number {
	height: 25px;
}
#form1 p #addbtn {
	height: 25px;
}
.Div2 {
	text-align: center;
}
.EmailContent {
	border-width: 2px;
	background-color: #EA7F1F;
	text-align: center;
}
.EmailContent .systemEmailCtx {
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
	border: 3px solid #0AF169;
	background-color: #C5C1F4;
}
.EmailContent .systemEmailCtx textarea {
	width: 50%;
	height: 250px;
	min-width: 0px;
}
.EmailContent p #SendEmail {
	margin-right: 50px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script> 
<script>
	function del(obj) {
 
       var judge = confirm("确认删除吗?")
       if (judge == true) {
		   alert("juage = true")
                tdNode = obj.parentNode;//得到td
                trNOde = tdNode.parentNode;//得到tr
                tbNOde = trNOde.parentNode;//得到table
                tbNOde.removeChild(trNOde);
        }
 
    }
	
	function eachTableRowID(tableName)
	 {
		 //获取table序号
		 var tab=document.getElementById(tableName);
		 //获取行数
     	 var rows=tab.rows;
		 var ary = new Array();
		 //遍历行
     	 for(var i=1;i<rows.length;i++)
     	 {
			//遍历表格列
			ary[i-1] = rows[i].cells[0].innerHTML
     	 }
		 return ary
	 }
	
	function eachTableRowItem(tableName)
	 {
		 //获取table序号
		 var tab=document.getElementById(tableName);
		 //获取行数
     	 var rows=tab.rows;
		 var ary = new Array();
		 //遍历行
     	 for(var i=1;i<rows.length;i++)
     	 {
			//遍历表格列
			var st = {
				Id :  rows[i].cells[0].innerHTML,
				Cnt : 	rows[i].cells[2].innerHTML
			}
			ary[i-1] = st
     	 }
		 return ary
	 }
	
	function AddUserToTable(Id,name){
		var tb = document.getElementById("tab2");
            //创建行对象
        var tt = document.createElement("tr");
            //创建列对象
        var td1 = document.createElement("td");
        var td2 = document.createElement("td");
        var td3 = document.createElement("td");
           
            //创建a对象
            var pa = document.createElement("a");
            var userId = Id;
            var username = name;
               
            //设置td的操作a超链接
            pa.setAttribute("onclick", "del(this)");
            pa.setAttribute("href", "javascript:void(0)");//"javascript:void(0)"设置当前超链接不跳转，因为跳转了就还是跳转到了当前界面，
            //那就会刷新当前页面所以会没有效果，就像你写的代码没有反应一样
            pa.innerHTML = "删除"
            //把获取到的值付给td元素
            td1.innerHTML = userId;
            td2.innerHTML = username;
           
            //将各个td加入到tr中
            tt.appendChild(td1);
            tt.appendChild(td2);
            
            //超链接放入td4
            td3.appendChild(pa);
            tt.appendChild(td3);
            
            //tr加入到table
            tb.appendChild(tt);
	}
$(document).ready(function(){
	var ItemInfo
	function FindIDByName(name){
		for(var i = 0; i<ItemInfo.length;i++){			
			console.log("ItemInfo[i].Name:" + ItemInfo[i].Name)		
			console.log("name:" + name)		
			if (ItemInfo[i].Name == name){
				return ItemInfo[i].Id
			}
		}
		return ""
	};
	$("#Load").click(function(){
		$.ajax({
			url:"/LoadConfig",
			async: true,		
			type: "post",
			dataType: "json",
			headers: {
				"Content-Type": "application/json"
			},
			success:function(result){
				ItemInfo = result
				for(var i = 0; i<ItemInfo.length;i++){					
					$("#MergeSelect").append(`<option value=${ItemInfo[i].Name}>${ItemInfo[i].Name}</option>`); 
				}
			},
			error: function () {
                alert("服务器发生了错误")
            }
		});
	});
	
	$("#addbtn").click(function(){
		var tb = document.getElementById("tab1");
            //创建行对象
            var tt = document.createElement("tr");
            //创建列对象
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            var td4 = document.createElement("td");
            //创建a对象
            var pa = document.createElement("a");
            //得到input标签中的值
			var temp = $('#MergeSelect option:selected').text(); //document.getElementById("MergeSelect").value;
            var num1 = FindIDByName(temp);
            var name = temp;
            var Count = document.getElementById("ItemCnt").value;
            
            //设置td的操作a超链接
            pa.setAttribute("onclick", "del(this)");
            pa.setAttribute("href", "javascript:void(0)");//"javascript:void(0)"设置当前超链接不跳转，因为跳转了就还是跳转到了当前界面，
            //那就会刷新当前页面所以会没有效果，就像你写的代码没有反应一样
            pa.innerHTML = "删除"
            //把获取到的值付给td元素
            td1.innerHTML = num1;
            td2.innerHTML = name;
            td3.innerHTML = Count;
            // td4.innerHTML=bt;
            //将各个td加入到tr中
            tt.appendChild(td1);
            tt.appendChild(td2);
            tt.appendChild(td3);
            //超链接放入td4
            td4.appendChild(pa);
            tt.appendChild(td4);
            
            //tr加入到table
            tb.appendChild(tt);

	});
	
	$("#AddUer").click(function(){
		var Ip = $('#SvrIp option:selected').text(); 
		var dwUin = $('#PlayerID').val();
		var data = JSON.stringify({
				"Ip": Ip,
				"DwUin": dwUin,
				
		  });
		$.ajax({
			url:"/AddEmailUser",
			async: true,		
			type: "post",
			dataType: "json",
			data:data,
			headers: {
				"Content-Type": "application/json"
			},
			success:function(result){
				
				if(result.code = 200){
					AddUserToTable(result.Id,result.Name)
				}
				
				
			},
			error: function () {
                alert("服务器发生了错误")
            }
		});
	});
	
	$("#SendEmail").click(function(){
		var Ip = $('#SvrIp option:selected').text(); 
		var Title = $('#EmailTitile').val();
		var Content = $('#Content').val();
		var ary = eachTableRowID("tab2")
		var ary1 = eachTableRowItem("tab1")
		var Diamond = $('#Diamond').val(); 
		var Energy = $('#Energy').val();
		var LinkURL = $('#LinkURL').val();
		
		var data = JSON.stringify({
				"Ip": Ip,
				"UserIds": ary,
				"IsAll":false,
				"Diamond":Diamond,
				"Energy":Energy,
				"LinkURL":LinkURL,
				"ItemInfos":ary1,
				"Title":Title,
				"Content":Content
		  });
//		alert("data:" + data);
		$.ajax({
			url:"/SendEmail",
			async: true,		
			type: "post",
			dataType: "json",
			data:data,
			headers: {
				"Content-Type": "application/json"
			},
			success:function(result){				
				if(result.code = 200){
					alert("邮件插入成功")
				}								
			},
			error: function () {
                alert("服务器发生了错误")
            }
		});
	});
	
	$("#SvrSend").click(function(){
		var Ip = $('#SvrIp option:selected').text(); 
		var Title = $('#EmailTitile').val();
		var Content = $('#Content').val();
		var ary = eachTableRowID("tab2")
		var ary1 = eachTableRowItem("tab1")
		var Diamond = $('#Diamond').val(); 
		var Energy = $('#Energy').val();
		var LinkURL = $('#LinkURL').val();
		
		var data = JSON.stringify({
				"Ip": Ip,
				"UserIds": [],
				"IsAll":true,
				"Diamond":Diamond,
				"Energy":Energy,
				"LinkURL":LinkURL,
				"ItemInfos":ary1,
				"Title":Title,
				"Content":Content
		  });
//		alert("data:" + data);
		$.ajax({
			url:"/SendEmail",
			async: true,		
			type: "post",
			dataType: "json",
			data:data,
			headers: {
				"Content-Type": "application/json"
			},
			success:function(result){				
				if(result.code = 200){
					alert("邮件插入成功")
				}								
			},
			error: function () {
                alert("服务器发生了错误")
            }
		});
	});
})

</script>
</head>

<body bgcolor="#08ECDD">
	{{template "home.html" .}}
<div class="PageHead">
  <h2>邮件</h2>
  <p>
    <label>服务器地址选择</label>
    <select name="SvrIp"  required="required" id="SvrIp">
		{{range .SvrIpList}}
      		<option value={{.}}>{{.}}</option>          
    	{{end}}   
    </select>
  </p>
  <form id="form1" name="form1" method="post">
    <p>
      <label for="number">钻石:</label>
      <input name="Diamond" type="number" id="Diamond" value="0">
      <label for="number2">体力:</label>
      <input name="Energy" type="number" id="Energy" value="0">
      </br>
      <label for="textfield">邮件附加链接:</label>
      <input type="text" name="LinkURL" id="LinkURL">
    </p>
    <p>
      <input type="button" name="Load" id="Load" value="导入道具配置">
    </p>
    <p>
      <label>选择道具：</label>
      <select name="MergeSelect"  required="required" id="MergeSelect">
        <!-- {{range .MergeDataList}}
      		<option value={{.}}>{{.}}</option>
    	{{end}} -->
      </select>
    </p>
    <p>
      <label for="number">道具数量:</label>
      <input name="number" type="number" id="ItemCnt" value="1">
      <input type="button" name="addbtn" id="addbtn" value="添加道具">
    </p>
  </form>
  <table width="300" border="1" align="center" cellpadding="2" cellspacing="0" id="tab1">
    <caption>
    添加道具表
    </caption>
    <tr>
      <td>道具Id</td>
      <td>道具名称</td>
      <td>个数</td>
      <td>操作</td>
    </tr>
  </table>
  <p>&nbsp;</p>
</div>
<div class="Div2">
  <p>&nbsp;</p>
  <p>
    <label for="PlayerID" > 接收邮件玩家的ID:</label>
    <input type="text" name="PlayerID" id="PlayerID">
    <input type="button" name="AddUer" id="AddUer" value="添加玩家">
  </p>
  <p>&nbsp;</p>
  <table width="300" border="1" align="center" cellpadding="2" cellspacing="0" id="tab2">
    <caption>
    邮件玩家表
    </caption>
    <tr>
      <td>玩家Id</td>
      <td>玩家名称</td>
      <td>操作</td>
    </tr>
  </table>
  <p>&nbsp;</p>
</div>
<div class="EmailContent">
  <label for="textfield2"><br>
    <br>
    <br>
    标题:</label>
  <input name="EmailTitile" type="text" id="EmailTitile" value="系统邮件">
  <div class="systemEmailCtx">
    <textarea name="Content" required="required" id="Content" placeholder="输入邮件文本内容"></textarea>
  </div>
  <p>
    <input name="SendEmail" type="button" id="SendEmail" value="发送邮件">
    <input type="button" name="SvrSend" id="SvrSend" value="全服发送">
  </p>
  <p>&nbsp;</p>
</div>
</body>
</html>
